<template>
	<div class="school">
		<h2>我是School组件</h2>
		<h4>学校名称：{{school.name}}</h4>
		<h4>学校地址：{{school.address}}</h4>
		<h4>学校电话：{{school.tel}}</h4>
		<h4>学校年龄：{{school.age}}</h4>
		<h4>下方Saying组件中语录的长度是：{{sayingList.length}}</h4>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="incrementSchoolAge(n)">点我+</button>
	</div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'

	export default {
		name:'School',
		data() {
			return {
				n:1
			}
		},
		methods: {
			...mapMutations({incrementSchoolAge:'INCREMENT_SCHOOL_AGE'})
		},
		computed:{
			...mapState(['school','sayingList'])
		}
	}
</script>

<style>
	.school{
		background-color: skyblue;
		padding: 20px;
	}
</style>